<template>
	<div class="products_stable">
	<!--接口列表内容-->
	<template>
		<el-table
			:data="tableData"
			ref="multipleTable"
			style="width:90%; margin:0 auto;"  
			border
			v-loading="listLoading"
			:header-cell-class-name="tableheaderClassName"
			:row-class-name="tableRowClassName"
			@selection-change="handleSelectionChange">
			<el-table-column
		      type="selection"
		      width="55">
		    </el-table-column>
			<el-table-column 
						prop="name"
						label="接口名称">
					</el-table-column>
					<el-table-column
						prop="url"
						label="路径"
						width='370px'>
					</el-table-column>
					<el-table-column
						prop="status"
						label="状态"
						:formatter='formatter' >
					</el-table-column>	
					<el-table-column
						prop="type"
						label="类型"
						:formatter='formatterType' >
					</el-table-column>	  	   					
					<el-table-column
				        prop="createTime"
				        label="创建日期"	
				        width="180">
				    </el-table-column>
		</el-table>
	</template>	
	<!--分页-->
		<div class="di claerfix">
			<div class="di_foot" style="margin:0 auto;">
				<el-pagination
					style='text-align:center;'
					background
					layout="prev, pager, next" 
					@current-change="handleCurrentChange" 
					:total="totalCount" 
				>
				</el-pagination>
			</div>
		</div>
		<!--确认和取消按钮-->
		<div style='text-align:center;margin-top:20px;'>
			<el-button type="success" @click='getUsers2'>授权</el-button>
			<el-button type="info" @click='back()'>返回</el-button>
		</div>

</div>
</template>
<script>
import axios from 'axios';
import { interfaceList, interfaceDel, checkLogin, addAuth } from '../../api/api.js';
export default {
	name:'InterfaceList',
	data() {
		var Edition = (rule, value, callback) => {
			console.log(value);
			var re =/^[1-9]+\.\d+\.\d+$/im;
			if (re.test(value)){
				callback();
			}else{
				return callback(new Error('版本号不正确'));
			}
		};
		return {
			pageNumber: 1,
			pagesize: 10,
			idArr:'',
			totalCount:0,
			multipleSelection:'',
			appId:'',
			interfaceId:123456,
			listLoading:false,
			tableData: [],
			dialogFormVisible: false,
			dialogFormVisible1: false,
			formLabelWidth: '120px'
		};
	},
	methods:{
		//获取未授权接口列表
		getUsers() {
			let para = {
				pageNumber: this.pageNumber,
				pagesize:this.pagesize,
				appId: this.appId
			};
			this.listLoading = true;
			interfaceList(para).then((res) => {
				this.tableData = res.list
				this.totalCount = res.count;
				this.listLoading = false;
			});
		},		
		//授权接口
		getUsers2() {
			if(this.idArr.length!=0){
					let para = {
					appId: this.appId,
					interfaceIds: this.idArr
					}
				this.listLoading = true;
				addAuth(para).then((res) => {
					if(res.code ==='0000'){
						this.open();
					}else{
						this.openError(res.message);
					}
					this.listLoading = false;
				});		
			}else{
				let msg = '请勾选接口！'
				this.openError(msg)
			}
			
		},
		// 分页获取
		handleCurrentChange(val) {
			this.pageNumber = val;
			this.getUsers();
		},
		//授权成功提示
		open() {
        this.$message({
          message: '授权成功！',
          type: 'success'
        });
        this.getUsers();
      },
    //授权失败提示
	openError(msg) {
        this.$message({
          message:msg,
          type: 'error'
        });
        this.getUsers();
      },
//    返回按钮
      back(rows) {	
      		window.history.back(-1);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        var interfaceArr = []
        this.multipleSelection.forEach(function(value){
        	interfaceArr.push(value.id)
　　		});
			this.idArr = interfaceArr.join(',');
			
			console.log('选择的faceId',this.idArr)
      },
//		格式化状态值
		formatter(row,column){
			return row.status == 1 ? '已发布' : '未发布';
		},
//		格式化类型
		formatterType(row,column){
			return row.type == 1 ? '内部接口' : '普通接口';
		},
		// 表格样式
		tableRowClassName({rowIndex}) {
			if (rowIndex % 2==0) {
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		tableheaderClassName() {
			return "table-head-th";
		},
	},
	mounted() {
		if(checkLogin(this)){
			let Authorized = sessionStorage.getItem('Authorized');
			if(Authorized){
				Authorized = JSON.parse(Authorized);
				this.appId = Authorized.id;
				console.log('应用传来的applyId:',this.appId)
			}
			this.getUsers();
		}	
	}
};
</script>
<style scoped>
	.products_stable{width:100%;margin:10px;}
	.products_stable .di{
		width:90%;
		margin: 0 auto;
		overflow: hidden;
	}
	.products_stable .di .di_foot{
		width: 38%;
		padding-bottom: 20px;
		padding-top: 20px;
	}
</style>
